<!--
 * @Author: 矫建武 1452239416@qq.com
 * @Date: 2024-11-29 08:29:32
 * @LastEditTime: 2024-12-16 17:25:26
 * @FilePath: \tool\src\views\tool\base64Code.vue
 * @Description: 
 * 
 * @file: https://github.com/OBKoro1/koro1FileHeader/wiki/%E5%AE%89%E8%A3%85%E5%92%8C%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B
-->
<style lang="scss" scoped>
.main {
  padding: 20px 200px;
  box-sizing: border-box;
  height: 100%;

  .main-operation {
    margin: 10px;
  }

  .main-image {
    .main-imag-header {
      display: flex;
      align-items: center;
    }
  }
}

.mian-image-content {
  display: flex;
  width: 100%;

  .mian-image-left,
  .mian-image-right {
    flex: 1;
    margin: 10px;
  }

  .mian-image-left {
    position: relative;

    .tags {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 2;
    }
  }

  .mian-image-right {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    position: relative;

    .preview {
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }
}
</style>
<template>
  <el-tabs v-model="activeName" @tab-click="clear">
    <el-tab-pane label="字符 base64" name="first">
      <div class="main">
        <el-input v-model="input" type="textarea" placeholder="请输入需要转码的字符串" :autosize="{ minRows: 8, maxRows: 8 }" />
        <div class="main-operation">
          <el-button type="primary" plain @click="code">编码</el-button>
          <el-button type="primary" plain @click="decode">解码</el-button>
          <el-button type="primary" plain @click="clear">清空</el-button>
        </div>
        <el-input v-model="output" type="textarea" placeholder="请输入需要转码的字符串" :autosize="{ minRows: 8, maxRows: 8 }"
          :readonly="true" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="图片 base64" name="image" v-loading="image.loading">
      <div class="main-image">
        <div class="main-imag-header">
          <label for="">本地图片：</label>
          <el-button type="primary" @click="selectFile">选择文件{{ fileName }}</el-button>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
          <label for="">图片url转base64：</label>
          <el-input style="max-width: 500px" placeholder="请输入图片url地址" v-model="image.url">
            <template #suffix>
              <el-button type="primary" plain size="small" @click="srcToBase64">转换</el-button>
            </template>
          </el-input>
        </div>

        <div class="mian-image-content">
          <div class="mian-image-left">
            <div class="tags">
              <el-button size="small" type="danger" @click="clear">清空</el-button>
              <el-button size="small" type="warning" @click="copy2">复制</el-button>
            </div>
            <el-input v-model="image.baseData" type="textarea" placeholder="base64图片"
              :autosize="{ minRows: 23, maxRows: 23 }" />
          </div>

          <div class="mian-image-right __flexCenter__">
            <el-tag type="warning" class="preview">预览</el-tag>
            <el-empty description="啥也没有,嘿嘿嘿!" v-if="!image.baseData" />
            <el-image v-else :src="image.baseData" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
              :preview-src-list="[image.baseData]" :initial-index="4" fit="cover" />
          </div>
        </div>
      </div>
    </el-tab-pane>

    <el-tab-pane label="文件 base64" name="second">
      <div class="main">
        <div class="main-operation">
          <el-button type="primary" @click="selectFile">选择文件{{ fileName }}</el-button>
          <el-button type="primary" plain @click="clear">清空</el-button>
          <el-button type="primary" plain @click="copy">复制</el-button>
        </div>

        <el-input v-model="output" type="textarea" :autosize="{ minRows: 20, maxRows: 20 }" :readonly="true" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { copyText, _uploads, fileToBase64, urlToBase64 } from '@/utils'
const activeName = ref('first')
const input = ref('')
const output = ref('')
const image = reactive({
  url: 'http://dutp-test.oss-cn-beijing.aliyuncs.com/%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90.png',
  baseData: '',
  loading: false
})
const code = () => {
  output.value = btoa(input.value)
}
const decode = () => {
  output.value = atob(input.value)
}
const clear = () => {
  input.value = ''
  output.value = ''
  fileName.value = ''
  image.baseData = ''
  image.url = ''
}

const fileName = ref('')
const selectFile = async () => {
  const [file] = await _uploads()
  fileName.value = file.name
  output.value = await fileToBase64(file)
  image.baseData = output.value
}

const copy = () => {
  if (output.value) copyText(output.value)
}
const copy2 = () => {
  if (image.baseData) copyText(image.baseData)
}

const srcToBase64 = async () => {
  image.loading = true
  image.baseData = await urlToBase64(image.url)
  image.loading = false
}
</script>
